<template>
  <div>
    <div>
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="问题标签名1">
          <el-input v-model="form.user" placeholder="标签名" clearable @clear="clear" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getTagList">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="dialogVisible = true">添加标签</el-button>
        </el-form-item>
      </el-form>
      <el-dialog
        title="添加标签"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-input v-model="addTagName" placeholder="请输入标签名" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addTag">添 加</el-button>
        </span>
      </el-dialog>
    </div>
    <div class="tags">
      <el-tag v-for="tag in tagList" :key="tag.id" type="primary" closable @close="delTag(tag.id)">{{ tag.name }}</el-tag>
    </div>
  </div>
</template>

<script>
import { addTag1, delTag1, getTag1List } from '@/api/tag'
export default {
  data() {
    return {
      addTagName: '',
      dialogVisible: false,
      tagList: [],
      form: {
        user: ''
      }
    }
  },
  mounted() {
    this.getTagList()
  },
  methods: {
    clear() {
      this.getTagList()
    },
    addTag() {
      addTag1({ name: this.addTagName }).then(res => {
        if (res.code !== 1) {
          this.$message.error(res.data)
        } else {
          this.getTagList()
        }
      })
      this.dialogVisible = false
      this.addTagName = ''
    },
    delTag(id) {
      delTag1({ id: id }).then(res => {
        this.getTagList()
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    getTagList() {
      getTag1List({ tagName: this.form.user }).then(res => {
        this.tagList = res.data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-tag {
  margin-left: 10px;
}
</style>
